Using the :lang() Pseudo-Class in CSS
The :lang() pseudo-class in CSS allows you to target elements based on their language attribute (lang). This is useful for applying language-specific styling, such as font, text direction, or typographic rules.
:lang(language-code)– Selects elements whose language matches the specified code, e.g.,:lang(en)for English or:lang(fr)for French.Matches both the
langattribute on the element and inherited language from parent elements.Useful for internationalization, styling multilingual content differently.
In this example, the English paragraph uses Arial and navy text, while the French paragraph uses Times New Roman and dark red text, demonstrating language-specific styling with :lang().
Use
:lang()for multilingual websites to enhance readability and cultural appropriateness.Combine with other pseudo-classes like
:first-letteror:first-linefor detailed typographic styling.Ensure correct
langattributes are set on elements to make this pseudo-class effective.Test across browsers as support is broad but always verify inherited language behavior.